(function (window, $, undefined) {
var _block_namespaces_ = window._block_namespaces_ || (window._block_namespaces_ = {});
var name = "swiperPhotoImg77361_style1";
var swiperPhotoImg77361_style1 = _block_namespaces_[name] || (_block_namespaces_[name] = {});
$.extend(swiperPhotoImg77361_style1, {
"init": init
})
function init(nodeObj) {
if (!!!nodeObj) {
return;
}
var $selector = $('#' + nodeObj.pageNodeId);
var nodeId = nodeObj.nodeId;
if($selector.find('.lead_swiper_wrapper').length) {
initSwiper($selector, nodeObj, nodeId)
} else {
initWatefall($selector, nodeObj)
}
leadComponentSite.globalMinimumUnitEvent.on(nodeObj.nodeId, function (notifyOriginType, selectedProdObj) {
if (notifyOriginType && notifyOriginType == 'sku') {
var relationImage = (selectedProdObj && selectedProdObj.relationImage) || '';
setSkuRelationImg($selector,relationImage)
}
})
videoFun($selector, nodeObj.encodeId, nodeObj);
prodLabelPublic($selector, '.prodetail_labelfather');
// 放大镜
bigMaskFun($selector.get(0),nodeObj);
//产品选型数据
try {
var threeDData = JSON.parse(decode(nodeObj.templateSaveJson))
console.log("选型数据：",threeDData)
threeDInit($selector, threeDData)
} catch (err) {
console.log("产品选型初始化失败")
}
}
//base64解密
function decode(str) {
// Going backwards: from bytestream, to percent-encoding, to original string.
return decodeURIComponent(atob(str).split('').map(function (c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
}
/**
* 产品选型初始化
*/
async function threeDInit($selector, threeDData) {
/**
* [产品选型模板] 3D模型展示模板 本地 "WEKpfUAMlLaZ" 线上 "WEKpfUAMlLaZ"
* [产品选型模板] 3D模型展示（新）本地 "kmKUAfpwcaKo" 线上 "VGKpfUANUQWO"
* [产品选型模板] 3D模型展示（嵌入） 本地 "hbKAfUpcHump" 线上 "hGpKfAUYSFbE"
*/
if (threeDData.basicSaveJson.templateObj.appName == "3D模型展示模板" ||
threeDData.basicSaveJson.templateObj.appId == "kmKUAfpwcaKo" ||
threeDData.basicSaveJson.templateObj.appId == "VGKpfUANUQWO" ||
threeDData.basicSaveJson.templateObj.appId == "hbKAfUpcHump" ||
threeDData.basicSaveJson.templateObj.appId == "hGpKfAUYSFbE"
) {
//初始化按钮
var switch3DBtn = ''
$selector.find('.bigBox').append(switch3DBtn);
if (!threeDData.templateSaveJson.resourceContent.newThree) {
//3D模型展示模板
} else if (threeDData.templateSaveJson.resourceContent.newThree && threeDData.templateSaveJson.resourceContent.newThree == "1") {
//3D模型展示（新）
//获取国际化文本
var fit = $selector.find("#adaptationWindow").val() || "Fit model to window";
var up_y = $selector.find("#yUp").val() || "Set Y axis as up vector";
var up_z = $selector.find("#zUp").val() || "Set Z axis as up vector";
var flip = $selector.find("#flipUp").val() || 'Flip up vector';
var fix_up_on = $selector.find("#upwardFixation").val() || "Fixed up vector";
var fix_up_off = $selector.find("#freeOrbit").val() || "Free orbit";
var light_mode = $selector.find("#lightMode").val() || "Light mode";
var dark_mode = $selector.find("#darkMode").val() || "Dark mode";
var m_d = $selector.find("#modelDisplay").val() || "Model Display";
var b_c = $selector.find("#backgroundColor").val() || "Background Color";
var e_m = $selector.find("#environment").val() || "Environment";
var s_e = $selector.find("#showEdges").val() || "Show Edges";
var e_c = $selector.find("#edgeColor").val() || "Edge Color";
var r_d = $selector.find("#restorDefault").val() || "Reset to Default";
var u_b_i = $selector.find("#backgroundImage").val() || "Use as background image";
var m_l = $selector.find("#modelLoading").val() || "Loading Model";
var d_c = $selector.find("#defaultColor").val() || "Default Color";
var i_s = $selector.find("#importSettings").val() || "Import Settings";
var ourterHtml = ''
$('body').append(ourterHtml);
$selector.find('.bigBox .switch3D').unbind("click").bind("click", function () {
if (!$(this).hasClass('.active-new')) {
var modelSrc = threeDData.templateSaveJson.resourceContent.threeDUrl;
var llist = {
p_t: 1,
l: {
fit: fit,
up_y: up_y,
up_z: up_z,
flip: flip,
fix_up_on: fix_up_on,
fix_up_off: fix_up_off,
light_mode: light_mode,
dark_mode: dark_mode,
m_d: m_d,
b_c: b_c,
e_m: e_m,
s_e: s_e,
e_c: e_c,
r_d: r_d,
u_b_i: u_b_i,
m_l: m_l,
d_c: d_c,
i_s: i_s
}
}
var iframe_baseSrc = `https://a0.leadongcdn.cn/build/package/onlineviewer/index.html?params=${encodeURIComponent(JSON.stringify(llist))}/#model=`
var tmp = ``;
$('.new-threed-box .content').html(tmp);
$('.new-threed-box').show();
$(this).addClass('active-new')
}
})
$(".new-threed-box .close").unbind("click").bind("click", function () {
$('.new-threed-box .content').html('');
$('.new-threed-box').hide();
$selector.find('.bigBox .switch3D').removeClass('active-new');
})
$selector.find('.bigBox .switch3D').removeClass("hide")
} else if (threeDData.templateSaveJson.resourceContent.newThree && threeDData.templateSaveJson.resourceContent.newThree == "2") {
//3D模型展示（嵌入）
var ourterHtml = ''
$selector.find('.bigBox').append(ourterHtml);
$selector.find('.bigBox .switch3D').unbind("click").bind("click", function () {
if (!$(this).hasClass('.active-new')) {
var modelSrc = threeDData.templateSaveJson.resourceContent.threeDUrl;
$('.new-threed-iframe-box .content').html(modelSrc);
$('.new-threed-iframe-box').show();
$(this).addClass('active-new')
}
})
$(".new-threed-iframe-box .close").unbind("click").bind("click", function () {
$('.new-threed-iframe-box .content').html('');
$('.new-threed-iframe-box').hide();
$selector.find('.bigBox .switch3D').removeClass('active-new');
})
$selector.find('.bigBox .switch3D').removeClass("hide")
}
}
}
/**
* 轮播
*/
function initSwiper($selector, nodeObj, nodeId) {
const $bigBoxContainer = $selector.find('.bigBox');
const renderCallback = function (options) {
const upAndDown = {
swiperSetting: function (config) {
const swiper_config = {
selector: config.selectorUuid + " .upAndDown .lead_swiper_thumbs",
config: {
spaceBetween: config.spaceBetween || 10,
slidesPerView: config.slidesPerView || 5,
freeMode: true,
watchSlidesProgress: true
}
}
if(config.autoplay && config.autoplay == '1') swiper_config.config.autoplay = {
delay: config.autoplaySpeed,
disableOnInteraction: false,
}
if(config.loop && config.loop == '1') swiper_config.config.loop = true
return swiper_config
},
thumbsSetting: function (swiper, config) {
const swiper_config = {
selector: config.selectorUuid + " .upAndDown .lead_swiper_wrapper",
config: {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: swiper,
},
}
}
if(config.autoplay && config.autoplay == '1') swiper_config.config.autoplay = {
delay: config.autoplaySpeed,
disableOnInteraction: false,
}
if(config.loop && config.loop == '1') swiper_config.config.loop = true
return swiper_config
}
}
const leftAndRight = {
swiperSetting: function (config) {
const swiper_config = {
selector: config.selectorUuid + " .leftAndRight .lead_swiper_thumbs",
config: {
spaceBetween: config.spaceBetween || 10,
slidesPerView: config.slidesPerView || 5,
direction: 'vertical',
freeMode: true,
watchSlidesProgress: true
}
}
return swiper_config
},
thumbsSetting: function (swiper, config) {
// 需要计算外层容器高度
const slidesPerView = config.slidesPerView || 5
const spaceBetween = config.spaceBetween || 10
let totalHeight = 0;
if($selector.find('.leftAndRight .lead_swiper_thumbs .swiper-slide').length > slidesPerView) {
$selector.find('.leftAndRight .lead_swiper_thumbs .swiper-slide').slice(0, slidesPerView).each(function() {
var height = $(this).outerHeight(); // 获取元素的高度，包括内边距和边框
totalHeight += height; // 累加高度
});
totalHeight += (slidesPerView - 1) * spaceBetween
$selector.find('.leftAndRight .lead_swiper_thumbs').css('height', totalHeight + 'px')
}
const swiper_config = {
selector: config.selectorUuid + " .leftAndRight .lead_swiper_wrapper",
config: {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: swiper,
},
}
}
if(config.autoplay && config.autoplay == '1') swiper_config.config.autoplay = {
delay: config.autoplaySpeed,
disableOnInteraction: false,
}
if(config.loop && config.loop == '1') swiper_config.config.loop = true
return swiper_config
}
}
const leadSwiperOption = {
upAndDown,
leftAndRight
}
const initLeaSwiper = (setting, config) => {
const { swiperSetting, thumbsSetting } = setting
const swiperOption = swiperSetting(config)
var swiper;
if (document.querySelector(swiperOption.selector)) {
swiper = new Swiper(swiperOption.selector, swiperOption.config);
}
const thembsOption = thumbsSetting(swiper, config)
var swiper2 = new Swiper(thembsOption.selector, thembsOption.config);
swiper2.on('slideChange', function () {
$bigBoxContainer.attr("data-activeIndex", this.activeIndex);
skuRelationImgEffect($selector);
});
}
initLeaSwiper(leadSwiperOption[options.currentVariable], options);
// 获取当前的显示的产品图片
var nodeExtendParams = _block_namespaces_[nodeId] || (_block_namespaces_[nodeId] = {});
$.extend(nodeExtendParams, {
getCurrentProductImg: function getSkuParams() {
var prodDetailContainer = $selector.parents('.dynamic-component-container');
var photoImgEl = prodDetailContainer.find(".lead_swiper_wrapper .swiper-slide-active img");
if (photoImgEl.length > 0) {
var prodPhotoUrl = photoImgEl.attr("src");
return prodPhotoUrl;
}
}
})
}
const componentParams = {
callback: function () {
console.log('swiperPhotoImg77361_style1 init callback')
renderCallback(nodeObj)
}
}
const params = Object.assign(nodeObj, componentParams)
leadComponentSite.miniUnitProductImg.init(params);
}
function skuRelationImgEffect($selector){
var allPhotoImg = $selector.find('.lead_swiper_wrapper').find('.swiper-slide img');
allPhotoImg.each(function(index,item){
var _src = $(item).attr("src");
var _orginSrc = $(item).attr("data-original");
if(_src != _orginSrc){
$(item).attr("src",_orginSrc);
}
})
}
// 设置sku关联图片
function setSkuRelationImg($selector,relationImage){
if(!relationImage){
skuRelationImgEffect($selector);
return;
}
var activePhoto = $selector.find('.lead_swiper_wrapper').find('.swiper-slide-active img');
activePhoto.attr("src",relationImage);
}
/**
* 瀑布流
*/
async function initWatefall($selector, nodeObj) {
await leadComponentSite.imagesloadedSourceImport.init({});
await leadComponentSite.masonrySourceImport.init({});
console.log('swiperPhotoImg77361_style1 masonrySourceImport init callback')
const thatGroup = $selector.find('.lead_waterfall .lead_prodimg_container')[0]
thatGroup.querySelectorAll('img[loading="lazy"]').forEach(img => {
img.loading = 'eager'; // 改变为 'eager' 以立即加载
});
imagesLoaded(thatGroup, function() {
var $grid = $(thatGroup).isotope({
itemSelector: '.swiper-slide',
percentPosition: true,
masonry: {
columnWidth: '.swiper-slide',
gutter: nodeObj.waterfallRowSpace || 20,
}
});
$grid.isotope('layout')
})
const slidesPerView = nodeObj.slidesPerView || 5
const spaceBetween = nodeObj.spaceBetween || 10
let totalHeight = 0;
if($selector.find('.leftAndRight .lead_swiper_thumbs .swiper-slide').length > slidesPerView) {
$selector.find('.leftAndRight .lead_swiper_thumbs .swiper-slide').slice(0, slidesPerView).each(function() {
var height = $(this).outerHeight(); // 获取元素的高度，包括内边距和边框
totalHeight += height; // 累加高度
});
totalHeight += (slidesPerView - 1) * spaceBetween
$selector.find('.leftAndRight .lead_swiper_thumbs').css('height', totalHeight + 'px')
}
const initLeaSwiper = (config) => {
const swiperSetting = {
selector: config.selectorUuid + " .leftAndRight .lead_swiper_thumbs",
config: {
spaceBetween: config.spaceBetween || 10,
slidesPerView: config.slidesPerView || 5,
freeMode: true,
direction: 'vertical',
watchSlidesProgress: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
}
}
}
var swiper2 = new Swiper(swiperSetting.selector, swiperSetting.config);
swiper2.on('slideChange', function () {
$bigBoxContainer.attr("data-activeIndex", this.activeIndex);
skuRelationImgEffect($selector);
});
}
const componentParams = {
callback: function () {
console.log('swiperPhotoImg77361_style1 init callback')
initLeaSwiper(nodeObj);
}
}
const params = Object.assign(nodeObj, componentParams)
leadComponentSite.miniUnitProductImg.init(params);
}
function videoFun($selector, encodeId, nodeObj) {
var photoBox = $selector.find(".bigBox");
// 播放按钮
const videoBtn = $selector.find(".playVideo")
// 内链标签
const innerLinkEl = $selector.find(".innerLink")
// 内链播放
const innerPlayEl = innerLinkEl.find("video")
// 外链标签
const waiLinkEl = $selector.find(".waiLink")
// 内链播放
const waiLinkPlayEl = waiLinkEl.find("iframe")
// 播放方式
const thumbsVideoPlayWay = nodeObj.thumbsVideoPlayWay
// 默认容器
var videoContainer = {
container: innerLinkEl,
playEl: innerPlayEl
}
// 关闭按钮
const closeVideoPlay = $selector.find(".closeVideoPayl")
const video_container_box = $selector.find(".video_container_box")
var url = '/phoenix/admin/video/purl';
/**
* 检测图片是否有效（能打开）
*/
function checkImgExists(imgurl) {
return new Promise(function(resolve, reject) {
var ImgObj = new Image()
ImgObj.src = imgurl
ImgObj.onload = function(res) {
resolve(res)
}
ImgObj.onerror = function(err) {
reject(err)
}
})
}
/**
* 获取内链mp4缩略图
*/
function getvideoMp4Thumbs(mp4Link) {
return mp4Link + "?vframe/jpg/offset/1"
}
function getInnerThumb(urlLink) {
if(!urlLink) return;
const _urlLink = urlLink.toLocaleLowerCase();
if (_urlLink.indexOf('.mp4') != -1) {
return getvideoMp4Thumbs(urlLink)
}
}
/**
* 获取youtube缩略图
*/
function getvideoYoutobeThumbs(mp4Link) {
const matchList = mp4Link.match(/live\/(.*)\?/);
if(matchList && matchList[1]){
return `//i.ytimg.com/vi/${matchList[1]}/maxresdefault.jpg`
}
const matchList2 = mp4Link.match(/watch.*=(.*)/)
if(matchList2 && matchList2[1]){
return `//i.ytimg.com/vi/${matchList2[1]}/maxresdefault.jpg`
}
}
function getWaiThumb(urlLink){
if(!urlLink) return;
const isYoutube = urlLink.indexOf('youtube') != -1;
if(isYoutube){
return getvideoYoutobeThumbs(urlLink);
}
}
/**
* 设置视频缩略图
*/
function setThumbFun(thumbImg) {
if (!thumbImg) return;
console.log('视频的缩略图链接',thumbImg);
checkImgExists(thumbImg).then(()=>{
const $thumbEl = $selector.find(".video-cover-image");
$thumbEl.attr("src",thumbImg);
}).catch(()=>{
//fail callback
console.log('无效链接或者当前网络无法打开',thumbImg)
})
}
$.ajax({
url: url,
type: 'get',
data: {
"pid": encodeId
},
success: function (xhr) {
try {
// 缩略图
let thumbImg = '';
const srcVideoObj = JSON.parse(xhr);
if (srcVideoObj) {
if (srcVideoObj.mp4Url) {
videoContainer.container = innerLinkEl;
videoContainer.playEl = innerPlayEl;
innerPlayEl.attr('data-src', srcVideoObj.mp4Url);
thumbImg = getInnerThumb(srcVideoObj.mp4Url);
} else if (srcVideoObj.vedioUrl) {
// 是否外链
var isWaiLink = srcVideoObj.thirdLink && srcVideoObj.thirdLink === "1";
if (isWaiLink) {
videoContainer.container = waiLinkEl;
videoContainer.playEl = waiLinkPlayEl;
waiLinkPlayEl.attr('data-src', srcVideoObj.vedioUrl);
thumbImg = getWaiThumb(srcVideoObj.vedioUrl);
} else {
videoContainer.container = innerLinkEl;
videoContainer.playEl = innerPlayEl;
innerPlayEl.attr('data-src', srcVideoObj.vedioUrl);
thumbImg = getInnerThumb(srcVideoObj.vedioUrl);
}
}
setThumbFun(thumbImg);
}
} catch (e) {
console.log(e);
}
}
});
// 开启视频播放
videoBtn.unbind("click").bind("click", function () {
if(thumbsVideoPlayWay == 'iframe') {
video_container_box.removeClass('hide');
closeVideoPlay.removeClass('hide');
videoBtn.removeClass('active');
$(this).addClass('active');
var orginSrc = videoContainer.playEl.attr('data-src');
if (orginSrc && !videoContainer.playEl.attr('src')) {
videoContainer.playEl.attr('src', orginSrc);
}
videoContainer.container.removeClass('hide');
photoBox.addClass('playVideoMode');
if (swiperPhotoImg77361_style1['closeBigMask_' + nodeObj.nodeId]) {
swiperPhotoImg77361_style1['closeBigMask_' + nodeObj.nodeId]();
}
} else {
var html = `
${video_container_box.html()}
`;
document.body.insertAdjacentHTML('beforeend', html);
var orginSrc = $('.lead-preview-video-box .innerLink video').attr('data-src');
if (orginSrc && !$('.lead-preview-video-box .innerLink video').attr('src')) {
$('.lead-preview-video-box .innerLink video').attr('src', orginSrc);
}
$('.lead-preview-video-box .innerLink').removeClass('hide')
$('.lead-preview-close').on('click', function() {
$('.lead-preview-box video')[0].pause()
$('.lead-preview-box').remove();
})
}
})
// 关闭视频播放
closeVideoPlay.unbind("click").bind("click", function () {
innerLinkEl.addClass('hide');
waiLinkEl.addClass('hide');
closeVideoPlay.addClass('hide');
video_container_box.addClass('hide');
photoBox.removeClass('playVideoMode');
})
}
function bigMaskFun(selectorEl,nodeObj) {
var config = {
container: '.bigBox',
bigMask: '.bigMask',
mask: '.mask',
bimg: '.bimg'
}
//获取遮挡框和放大镜的元素
var box = $(selectorEl.querySelector(config.container));
var bigMask = selectorEl.querySelector(config.bigMask);
var mask = selectorEl.querySelector(config.mask);
var bimg = selectorEl.querySelector(config.bimg);
if (!bigMask) {
return;
}
function _suspensionFun() {
if (box.hasClass('playVideoMode') || $(window).width() <= 768) {
return true;
}
}
function getElementPosition(element) {
// 获取元素相对于视口的位置信息
const rect = element.getBoundingClientRect();
// 获取页面滚动的距离
const scrollX = window.scrollX || window.pageXOffset;
const scrollY = window.scrollY || window.pageYOffset;
// 计算元素距离页面顶部、底部、左侧和右侧的距离
const top = rect.top + scrollY;
const bottom =
(window.innerHeight || document.documentElement.clientHeight) -
rect.bottom +
scrollY;
const left = rect.left + scrollX;
const right =
(window.innerWidth || document.documentElement.clientWidth) -
rect.right +
scrollX;
return {
top: top,
bottom: bottom,
left: left,
right: right,
};
}
function isLeftOrRightSpace(element){
if(!element){
return;
}
const rectSpace = getElementPosition(element)
return rectSpace.left > rectSpace.right
}
if($(selectorEl).find('.lead_waterfall .swiper-slide').length) {
const box1 = $(selectorEl).find('.lead_waterfall .swiper-slide');
//添加事件鼠标在box盒子上时，显示遮挡框和放大镜的元素
//添加事件鼠标离开box盒子上时，隐藏遮挡框和放大镜的元素
box1.on('mouseenter', function(event) {
if (_suspensionFun()) {
return;
}
const bigImg = bigMask.querySelector("img")
const orginImg = this.querySelector("img")
const isPositionLeft = isLeftOrRightSpace(orginImg)
if(isPositionLeft && bigMask){
bigMask.classList.add("floatleft");
}
if (bigImg && orginImg) {
bigImg.src = orginImg.src
bigMask.style.display = 'block';
mask.style.display = 'block';
} else {
if (swiperPhotoImg77361_style1['closeBigMask_' + nodeObj.nodeId]) {
swiperPhotoImg77361_style1['closeBigMask_' + nodeObj.nodeId]();
}
}
});
box1.on('mouseout', function(event) {
if (_suspensionFun()) {
return;
}
if($(event.toElement).parents(".bigBox").length > 0){
return;
}
if (swiperPhotoImg77361_style1['closeBigMask_' + nodeObj.nodeId]) {
swiperPhotoImg77361_style1['closeBigMask_' + nodeObj.nodeId]();
}
});
//遮挡框的元素跟随鼠标移动
// box.on('mousemove', move)
// box[0].addEventListener('mousemove', move);
} else {
//添加事件鼠标在box盒子上时，显示遮挡框和放大镜的元素
//添加事件鼠标离开box盒子上时，隐藏遮挡框和放大镜的元素
box.on('mouseover', function(event) {
if (_suspensionFun()) {
return;
}
const bigImg = bigMask.querySelector("img")
const orginImg = this.querySelector(".swiper-slide-active img")
const isPositionLeft = isLeftOrRightSpace(orginImg)
if (bigImg && orginImg) {
bigImg.src = orginImg.src
} else {
// // const formImg = event.fromElement.currentSrc
// const formImg = this.querySelector("img").src
// if (bigImg && formImg) bigImg.src = formImg
}
if(isPositionLeft && bigMask){
bigMask.classList.add("floatleft");
}
bigMask.style.display = 'block';
mask.style.display = 'block';
});
box.on('mouseout', function(event) {
if (_suspensionFun()) {
return;
}
if($(event.toElement).parents(".bigBox").length > 0){
return;
}
if (swiperPhotoImg77361_style1['closeBigMask_' + nodeObj.nodeId]) {
swiperPhotoImg77361_style1['closeBigMask_' + nodeObj.nodeId]();
}
});
//遮挡框的元素跟随鼠标移动
// box.on('mousemove', move)
// box[0].addEventListener('mousemove', move);
}
box[0].addEventListener('mousemove', move);
swiperPhotoImg77361_style1['closeBigMask_' + nodeObj.nodeId] = function () {
bigMask.style.display = 'none';
mask.style.display = 'none';
}
//让鼠标的中心停在遮挡框中心
function move(e) {
// if($(selectorEl).find('.lead_waterfall .swiper-slide').length) {
// const bigImg = bigMask.querySelector("img")
// console.log(e)
// // const imgSrc = $(this).find('img').attr('src')
// // if(bigImg && imgSrc) {
// // bigImg.src = imgSrc
// // }
// }
if (_suspensionFun()) {
return;
}
var rect = box[0].getBoundingClientRect()
var topSpace = Math.abs(rect.top);
var x = e.x - rect.left - mask.offsetWidth / 2;
var y = e.y - rect.top - mask.offsetHeight / 2;
// console.log(x, y);
//将遮挡框固定在box里
var maxX = box[0].offsetWidth - mask.offsetWidth;
var maxY = box[0].offsetHeight - mask.offsetHeight;
if (x <= 0) {
x = 0;
} else if (x >= maxX) {
x = maxX;
}
if (y <= 0) {
y = 0;
} else if (y >= maxY) {
y = maxY;
}
mask.style.left = x + 'px';
mask.style.top = y + 'px';
//大盒子图片与遮挡层成比例移动
var bigX = bimg.offsetWidth - bigMask.offsetWidth;
var bigY = bimg.offsetHeight - bigMask.offsetHeight;
var moveX = x * bigX / maxX;
var moveY = y * bigY / maxY;
//console.log(moveX, moveY);
// console.log(x, y);
bimg.style.left = -moveX + 'px';
bimg.style.top = -moveY + 'px';
}
}
function prodLabelPublic($selector, selectCls) {
var $li = $selector.find(selectCls);
var isFrontend = window.$_phoenix == undefined;
var str = "";
$li.each(function (i, data) {
var pid = $(this).data('pid')
i === $li.length - 1 ? str += pid : str += pid + ","
})
if (str.length > 0) {
var url = '/prod/label/get'
if (isFrontend) {
url = '/phoenix/admin/prod/label/get'
} else {
url = '/prod/label/get'
}
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
data: {
ids: str
},
success: function (res) {
$li.each(function () {
var that = this
var pid = $(this).data('pid')
if (res && res[pid] && res[pid].length > 0) {
res[pid].forEach(function (dataItem, i) {
//判断是自定义标签
var longNum = res[pid].length
if (dataItem['labelDivision'] === "1") {
if (dataItem['labelType'] === '0') {
$(that).find('.imgBox a').css({
'opacity': dataItem['transparency'],
"display": 'inline-block'
})
}
//判断是文本
var html = ''
if (dataItem['showType'] === "0") {
if (dataItem['showPositon'] === "0") {
//创建dom
var tempDom = '';
$(that).find('.labelfather').prepend(tempDom);
var $tlDom = $(that).find('.labelfather .prodlistAsync_label_text_tl')
$tlDom.addClass('show')
$tlDom.find('span').css('color', dataItem['fontColor'])
if (dataItem['labelType'] === '1') {
html = ""
if (dataItem['discountOff'] && dataItem['discountOff'].length > 0) {
html += "" + dataItem['discountOff'] + ""
html += "
"
}
if (dataItem['discountContext'] && dataItem['discountContext'].length > 0) {
html += "Save " + dataItem['discountSymbol'] + ""
html += "" + dataItem['discountContext'] + ""
}
html += '
'
$tlDom.html(html)
} else {
$tlDom.find('div').html(dataItem['labelName'])
}
var top = $tlDom.width() / 1.414 - 6 + "px"
var left = $tlDom.width() / 2.828 - 2
$tlDom.css({
"left": "-" + left + "px",
"top": top,
'font-size': '10px',
"boxShadow": "0px -100px 0px 100px " + dataItem['backgroundColor'],
"backgroundColor": dataItem['backgroundColor'],
"zIndex": longNum - i
});
} else if (dataItem['showPositon'] === "1") {
var tempDom = '';
$(that).find('.labelfather').prepend(tempDom);
var $trDom = $(that).find('.labelfather .prodlistAsync_label_text_tr');
$trDom.addClass('show')
$trDom.find('span').css('color', dataItem['fontColor'])
if (dataItem['labelType'] === '1') {
html = ""
if (dataItem['discountOff'] && dataItem['discountOff'].length > 0) {
html += "" + dataItem['discountOff'] + ""
html += "
"
}
if (dataItem['discountContext'] && dataItem['discountContext'].length > 0) {
html += "Save " + dataItem['discountSymbol'] + ""
html += "" + dataItem['discountContext'] + ""
}
html += "
"
$trDom.html(html)
} else {
$trDom.find('div').html(dataItem['labelName'])
}
$trDom.css({
"right": '-5px',
"top": "-5px",
'font-size': '10px',
"boxShadow": "0px -100px 0px 100px " + dataItem['backgroundColor'],
"backgroundColor": dataItem['backgroundColor'],
"zIndex": longNum - i
});
} else if (dataItem['showPositon'] === "2") {
var tempDom = '';
$(that).find('.labelfather').prepend(tempDom);
var $tDom = $(that).find('.labelfather>.prodlistAsync_label_text_t');
$tDom.css('flex-direction', 'column')
!$tDom.hasClass('show') ? $tDom.addClass('show') : null
if (dataItem['labelType'] === '1') {
var $tdivItem = document.createElement('div')
$tdivItem.setAttribute("class", "discount");
if (dataItem['discountOff'] && dataItem['discountOff'].length > 0) {
html += "" + dataItem['discountOff'] + ""
}
if (dataItem['discountContext'] && dataItem['discountContext'].length > 0) {
html += "Save " + dataItem['discountSymbol'] + ""
html += "" + dataItem['discountContext'] + ""
}
$tdivItem.innerHTML = html
$tdivItem.style.backgroundColor = dataItem['backgroundColor']
$tdivItem.style.color = dataItem['fontColor']
$tDom.append($tdivItem)
$tDom.css("zIndex", longNum - i)
} else {
var $tspanItem = document.createElement('div')
$tspanItem.innerHTML = dataItem['labelName'];
$tspanItem.style.backgroundColor = dataItem['backgroundColor']
$tspanItem.style.color = dataItem['fontColor']
$tDom.append($tspanItem)
$tDom.css("zIndex", longNum - i)
}
$tDom.each(function (index, element) {
if ($(element).children().length > 1) {
var widthSon = 0
$(element).children().each(function (i, ele) {
widthSon += $(ele).width() + 2
widthSon += 13
})
var fatherwidth = $(that).width()
if (widthSon > fatherwidth) {
$(element).css('flex-direction', 'column')
$($(element).children()[0]).css('margin-bottom', '3px')
} else {
$(element).css('flex-direction', 'row')
}
} else {
$(element).css('flex-direction', 'row')
}
})
} else if (dataItem['showPositon'] === "4") {
var tempDom = '';
$(that).find('.titleLabel').prepend(tempDom);
var $txtDom = $(that).find('.inlineLabel')
!$txtDom.hasClass('show') ? $txtDom.addClass('show') : null
$txtDom.addClass('discount')
if (dataItem['labelType'] === '1') {
if (dataItem['discountOff'] && dataItem['discountOff'].length > 0) {
html += "" + dataItem['discountOff'] + ""
}
if (dataItem['discountContext'] && dataItem['discountContext'].length > 0) {
html += "Save " + dataItem['discountSymbol'] + ""
html += "" + dataItem['discountContext'] + ""
}
$txtDom.html(html)
} else {
$txtDom.html(dataItem['labelName'])
}
$txtDom.css({
'backgroundColor': dataItem['backgroundColor'],
'color': dataItem['fontColor'],
"zIndex": longNum - i,
'display': 'inline-flex'
});
}
} else {
if (dataItem['showPositon'] === "0") {
var tempDom = '';
$(that).find('.labelfather').prepend(tempDom);
var $itlDom = $(that).find('.labelfather .prodlistAsync_label_img_tl')
$itlDom.addClass('show')
$itlDom.find('img').attr('src', dataItem['picUrl'])
$itlDom.css("zIndex", longNum - i)
} else if (dataItem['showPositon'] === "1") {
var tempDom = '';
$(that).find('.labelfather').prepend(tempDom);
var $itrDom = $(that).find('.labelfather .prodlistAsync_label_img_tr');
$itrDom.addClass('show')
$itrDom.find('img').attr('src', dataItem['picUrl'])
$itrDom.css("zIndex", longNum - i)
} else if (dataItem['showPositon'] === "3") {
var tempDom = '';
$(that).find('.labelfather').prepend(tempDom);
var $irDom = $(that).find('.labelfather .prodlistAsync_label_img_r')
!$irDom.hasClass('show') ? $irDom.addClass('show') : null
var $imgItem = document.createElement('img')
$imgItem.setAttribute('src', dataItem['picUrl'])
$irDom.append($imgItem)
$irDom.css("zIndex", longNum - i)
}
}
} else {
var tempDom = '';
$(that).find('.labelfather').prepend(tempDom);
var $irDom = $(that).find('.labelfather .prodlistAsync_label_img_r')
!$irDom.hasClass('show') ? $irDom.addClass('show') : null
var $imgItem = document.createElement('img')
$imgItem.setAttribute('src', dataItem['picUrl'])
$irDom.append($imgItem)
$irDom.css("zIndex", longNum - i)
}
})
}
})
}
});
}
}
})(window, jQuery);